<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>设定目标</title>
  <script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/rem.js"></script>
  <link href="{{env('CDN_RESOURCE')}}/mobile/campaign/achievement/css/new.css?v={{config('app.version')}}" rel="stylesheet" type="text/css">
  <script type="text/javascript">window.CDN_RESOURCE = "{{env('CDN_RESOURCE')}}"</script>
</head>
<body>
<div id="container" class="container">
  <header class="header">
    <div class="count" id="lesson-count"></div>
    <div class="target">目标课程数</div>
    <div class="rate" id="frequency"></div>
    <div class="rate-title">上课频率</div>
    <div class="line"></div>
    <ul class="nav" id="nav-wrapper">
      <li><a href="javascript:void(0);"></a></li>
      <li><a href="javascript:void(0);"></a></li>
      <li><a href="javascript:void(0);"></a></li>
      <li><a href="javascript:void(0);"></a></li>
      <li><a href="javascript:void(0);"></a></li>
      <li><a href="javascript:void(0);"></a></li>
    </ul>
  </header>
  <div id="section-wrapper" class="wrapper"></div>
</div>
<script type="text/javascript" src="https://static-app.97kid.com/wx/js/zepto.min.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/Zepto_fx_methods.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/moment.min.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/mobile/campaign/achievement/js/classie.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/mobile/campaign/achievement/js/hammer.min.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/mobile/campaign/achievement/js/modernizr.custom.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/login.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/AV.analytics.js"></script>
<script>
  (function() {
    $(document.body).on('touchmove', function(event) {
      event.preventDefault();
    });
    var analytics = AV.analytics({
      appId: 'antYy9lOFi5mkU9QKjtYmRLM-gzGzoHsz',
      appKey: 'jqyWxLyobpsmdwsJddJlDheb',
    });
    var account = new Account({
      closeBtn: false,
      loginFirst: true
    })

    var achievementsData = null

    function init() {

      var container = document.getElementById( 'container' ),
        wrapper = container.querySelector( 'div.wrapper' ),
        sections = Array.prototype.slice.call( wrapper.querySelectorAll( 'section' ) ),
        links = Array.prototype.slice.call( container.querySelectorAll( 'header.header > ul.nav > li' ) ),
        sectionsCount = sections.length,
        transEndEventNames = {
          'WebkitTransition': 'webkitTransitionEnd',
          'MozTransition': 'transitionend',
          'OTransition': 'oTransitionEnd',
          'msTransition': 'MSTransitionEnd',
          'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[Modernizr.prefixed( 'transition' )],
        eventtype = mobilecheck() ? 'touchstart' : 'click';

      // add navigation elements
      if( sectionsCount >= 3 && Modernizr.csstransforms3d ) {
        var current = 0,
          isAnimating = false;

        classie.add( container, 'triplelayout' );

        function createNavigation() {
          var navL = document.createElement( 'div' ),
            navR = document.createElement( 'div' ),
            sidenav = document.createElement( 'nav' );

          navL.className = 'sidenav-left';
          navR.className = 'sidenav-right';
          sidenav.className = 'sidenav';

          sidenav.appendChild( navL );
          sidenav.appendChild( navR );
          container.insertBefore( sidenav, wrapper.nextSibling );

          navL.addEventListener( eventtype, function() { navigate( 'left' ) } );
          navR.addEventListener( eventtype, function() { navigate( 'right' ) } );
        }

        function cleanClasses() {
          sections.forEach( function( el, i ) {
            el.className = '';
          } );
          links.forEach( function( el, i ) {
            el.className = '';
          } );
        }

        function navigate( dir ) {
          if( isAnimating ) {
            return false;
          }
          isAnimating = true;

          var invDir = dir === 'right' ? 'left' : 'right';
          classie.add( container, 'move-' + invDir );

          var l = current === 0 ? sectionsCount - 1 : current - 1,
            r = current < sectionsCount - 1 ? current + 1 : 0,
            nextE, next;

          if( dir === 'right' ) {
            nextE = r < sectionsCount - 1 ? r + 1 : 0;
            next = current < sectionsCount - 1 ? current + 1 : 0
          }
          else if( dir === 'left' ) {
            nextE = l > 0 ? l - 1 : sectionsCount - 1;
            next = current === 0 ? sectionsCount - 1 : current - 1
          }
          var nextSection = sections[ nextE ],
            nextLink = links[ nextE ];
          // clean classes
          nextSection.className = '';
          nextLink.className = '';
          classie.add( nextSection, '' + dir + '-outer' );
          classie.add( nextLink, 'nav-' + dir + '-outer' );

          var onTransitionEndFn = function() {
            nextSection.removeEventListener( transEndEventName, onTransitionEndFn );
            // clean classes
            cleanClasses();

            if( dir === 'right' ) {
              classie.add( sections[ current ], 'left' );
              classie.add( sections[ r ], 'current' );
              classie.add( nextSection, 'right' );

              classie.add( links[ current ], 'nav-left' );
              classie.add( links[ r ], 'nav-current' );
              classie.add( nextLink, 'nav-right' );

              current = current < sectionsCount - 1 ? current + 1 : 0;
            }
            else if( dir === 'left' ) {
              classie.add( nextSection, 'left' );
              classie.add( sections[ l ], 'current' );
              classie.add( sections[ current ], 'right' );

              classie.add( nextLink, 'nav-left' );
              classie.add( links[ l ], 'nav-current' );
              classie.add( links[ current ], 'nav-right' );

              current = current > 0 ? current - 1 : sectionsCount - 1;
            }

            classie.remove( container, 'move-' + invDir );
            isAnimating = false;
          }

          nextSection.addEventListener( transEndEventName, onTransitionEndFn );

          var achievement = achievementsData[next]
          document.querySelector('#lesson-count').innerHTML = achievement.lessonCount
          document.querySelector('#frequency').innerHTML = achievement.frequency
        }

        // assign the current, left and right classes to the respective sections
        classie.add( sections[ current ], 'current' );
        classie.add( sections[ current + 1 ], 'right' );
        classie.add( sections[ sectionsCount - 1 ], 'left' );
        // same for the header links
        classie.add( links[ current ], 'nav-current' );
        classie.add( links[ current + 1 ], 'nav-right' );
        classie.add( links[ sectionsCount - 1 ], 'nav-left' );

        // create navigation structure
        createNavigation();

        // click / touch events for the links
        links.forEach( function( el, i ) {
          el.addEventListener( eventtype, function( ev ) {
            ev.preventDefault();
            if( classie.has( el, 'nav-right' ) ) {
              navigate( 'right' );
            }
            else if ( classie.has( el, 'nav-left' ) ) {
              navigate( 'left' );
            }
            else {
              return false;
            }
          } )
        } );

        // add keyboard events
        document.addEventListener( 'keydown', function( ev ) {
          var keyCode = ev.keyCode || ev.which,
            arrow = {
              left: 37,
              right: 39
            };
          switch (keyCode) {
            case arrow.left :
              navigate( 'left' );
              break;
            case arrow.right :
              navigate( 'right' );
              break;
          }
        } );

        // add swipe events
        if( mobilecheck() ) {
          Hammer( container ).on( 'swipeleft', function( ev ) {
            navigate( 'right' );
          });

          Hammer( container ).on( 'swiperight', function( ev ) {
            navigate( 'left' );
          });
        }

      }

    }
    function initData () {
      account.getUserInfo(function (err, user) {
        if (!err) {
          account.ajax({
            type: 'GET',
            path: '/s/achievements',
            success: function (data) {
              achievementsData = data;
              var sectionHTML = ''
              var navHTML = ''
              for (var i = 0; i < data.length; i ++) {
                var achievement = data[i]
                var weeks = Math.ceil(achievement.lessonCount / achievement.frequency)
                var date = moment().add(weeks, 'weeks')
                var awardHTML = ''
                var awardDir = ['top-left', 'top-right', 'bottom-left', 'bottom-right']
                var gifts = achievement.gifts
                for (var j = 0; j < gifts.length && j < 4; j ++) {
                  var gift = gifts[j]
                  awardHTML += '<div class="item ' + awardDir[j] + '">' +
                  '               <img src="' + CDN_RESOURCE + '/mobile/campaign/achievement/img/award-' + gift.giftId + '.png">' +
                  '               <div class="text">' + gift.name + '</div>' +
                  '             </div>'
                }
                navHTML += '<li><a href="javascript:void(0);"></a></li>'
                sectionHTML += '<section>' +
                  '        <div class="time">预计' + date.format('YYYY年M月D日') + '(' + weeks + '周)完成目标</div>' +
                  '        <div class="line"></div>' +
                  '        <div class="title">完成目标奖励</div>' +
                  '        <div class="award">' + awardHTML + '</div>' +
                  '        <div class="buttons">' +
                  '          <button class="blue" data-aid="' + achievement.id + '">OK</button>' +
                  '        </div>' +
                  '      </section>'
              }
              document.querySelector('#lesson-count').innerHTML = data[0].lessonCount
              document.querySelector('#frequency').innerHTML = data[0].frequency
              document.querySelector('#section-wrapper').innerHTML = sectionHTML
              document.querySelector('#nav-wrapper').innerHTML = navHTML
              $('.buttons > .blue').click(submit)
              init();
            },
            error: function (err) {
              $.toastAlert(err.message, 2)
            }
          })
        }
      })
    }

    initData();

    function submit () {
      var aid = $(this).attr('data-aid')

      account.ajax({
        type: 'POST',
        path: '/s/achievements',
        data: {
          achievementLevelId: aid
        },
        success: function (data) {
          analytics.send({
            event: 'achievement-create',
            attr: {
              achievementLevelId: aid
            }
          });
          $.toastAlert('创建任务成功');
          window.location.href = '/wx/achievement';
        },
        error: function (err) {
          $.toastAlert('创建任务失败', 2)
        }
      })
    }

    function mobilecheck() {
      var check = false;
      (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
      return check;
    }
  })();
</script>
</body>
</html>